import React from "react";
import classNames from "classnames";
import { typeProp as typeProps } from "../../common/ui/Icon";
import { statusProps, directionProps } from "../../common/ui/Steps";
import {NavBar,Steps,Icon} from '@/ui'
export default function Pages(props) {
  const { prefixCls = "m-react-page-steps" } = props;
  const className = classNames({
    [prefixCls]: true,
  });
  return (
    <div className={className}>
      <NavBar title='Steps'/>
      <Steps
        status={statusProps.error}
        stepsList={[
          { title: "第一步" },
          { title: "第二步" },
          { title: "第三步" },
          { title: "第四步" },
        ]}
        type={directionProps.normal}
      ></Steps>
      {/* 自定义图标 */}
      <Steps
        status={statusProps.error}
        stepsList={[
          {
            title: "第一步",
            icon: (
              <Icon
                iconName="iconyingyuan"
                type={typeProps.icon}
                className={`${statusProps.error}-icon`}
                size="m"
              />
            ),
          },
          { title: "第二步" },
          { title: "第三步" },
          { title: "第四步" },
        ]}
        type={directionProps.normal}
        current={2}
      ></Steps>
      <Steps
        status={statusProps.success}
        stepsList={[
          { title: "第一步" },
          { title: "第二步" },
          { title: "第三步" },
          { title: "第四步" },
        ]}
        type={directionProps.vertical}
        current={2}
      ></Steps>
      <Steps
        status={statusProps.success}
        stepsList={[
          { title: "第一步" },
          { title: "第二步", status: "error" },
          { mainNode: false },
          {
            title: "第三步",
            icon: (
              <Icon iconName="iconyingyuan" type={typeProps.icon} size="m" />
            ),
          },
          { title: "第四步" },
        ]}
        type={directionProps.vertical}
        current={2}
      ></Steps>
    </div>
  );
}
